<template>
  <view class="exam-paper">
    <swiper class="exam-swiper" :duration="config.swiperDuration"
      :current="curIndex" @change="onChange">
      <swiper-item v-for="(item, index) in examData" :key="item.exam_id">
        <exam-paper-item v-if="curIndex == index" v-model:index="curIndex"
          :item="item" :paperNum="index"></exam-paper-item>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { computed, inject, ref, watch } from 'vue'
import ExamPaperItem from './exam-paper-item.vue'
import config from './config.js'

const examData = inject('sv-exam-data')

const props = defineProps({
  // 当前题目
  paper: {
    type: Object,
    default: () => {}
  },
})

const emits = defineEmits(['update:paper'])

const curIndex = ref(props.paper.index)

const curPaper = computed(() => {
  return examData.value[curIndex.value]
})

watch(() => props.paper, () => {
  curIndex.value = props.paper.index
}, { immediate: true })

function onChange(e) {
  curIndex.value = e.detail.current
  emits('update:paper', { data: curPaper.value, index: curIndex.value })
}

// 监听开始答题进度
uni.$once('sv-exam-start', (index) => {
  curIndex.value = index || 0
})
</script>

<style lang="scss">
.exam-paper {
  width: 100%;
  height: calc(100% - #{var(--card-header-height)});
  font-size: 16px;

  .exam-swiper {
    height: 100%;
  }
}
</style>